<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            text-align: center;
        }

        th {
            width: 100%;

            border: 1px solid black;
            display: block;
        }
    </style>
</head>

<body>
    <ul id="app">
        <li v-for="item in list">{{item}}</li>


        <button @click='ck'></button>
    </ul>
    <div id="ppp">
        <ul>
            <li v-for="item in list">
                {{item}} <button @click='del(ind)'>删除</button>
            </li>
        </ul>
        <button @click='ck'>添加</button>
    </div>
    <div id="aaa">
        <ul>


            <li v-for="(item,index) in list" @click='ck(item,index)'>
                {{item}}
                <input type="checkbox">
                <p></p>
            </li>
            <li v-for="item in li">{{item}}</li>

        </ul>
    </div>
    <div id="shouy">
        <table>
            <tr>
                <th>欢迎光临vue开发收银系统</th>
                <th>苹果10 $/斤 ,折扣</th>
                <th>请输入要购买的斤数
                    <input type="number" @input='ck' v-model="a">
                </th>
                <th><input type="button" @click='kk'>结账买单</th>
                <th>总价{{a*10}}元折后{{a*8}}元省了{{a*2}}元</th>
            </tr>
        </table>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({

        el: '#app',
        data() {
            return {
                list: [
                    '帅哥', '美女', '你好'
                ]
            }
        },
        methods: {
            ck() {
                this.list.push(this.list[0]);
                // 再把头部的数据删除掉
                this.list.shift();
            }
        },
    })
    let mm = new Vue({
        el: '#ppp',
        data() {
            return {
                list: [1, 2, 3, 5, 6]
            }
        },
        methods: {
            ck() {
                this.list.push(this.list[0])
            },
            del(ind) {
                this.list.splice(ind, 1)
                console.log(ind);
            }
        },
    })
    let vv = new Vue({
        el: '#aaa',
        data() {
            return {
                list: [
                    "科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"
                ],
                li: []
            }
        },
        methods: {
            ck(item, index) {
                console.log(index);
                this.li.push(item)
            }
        },
    })
    let aa = new Vue({
        el: '#shouy',
        data() {
            return {
                a: ''
            }
        },
        methods: {
            ck() {
                // console.log(a());
                console.log(this.a);
            },
            kk() {
                alert('购买成功')
                this.a = ''
            }
        },
    })
</script>

</html>